<template>
	<div class="select-product-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="800px">
			<el-card shadow="hover" :header="state.dialog.headerText">
				<div v-loading="state.treeLoading">
					<div class="tree-head">
						<div class="tree-head-one tree-head-item">产品名称</div>
						<div class="tree-head-one tree-head-item">计抛/计重</div>
						<div style="flex: 1; display: flex">
							<div class="tree-head-item">变体1</div>
							<div class="tree-head-item">变体2</div>
						</div>
					</div>
					<el-tree :data="state.treeTableData" show-checkbox node-key="id" ref="treeTableRef"
						:props="state.treeDefaultProps" @check="onCheckTree">
						<template #default="{ node, data }">
							<span class="tree-custom-node">
								<span style="flex: 1">{{ data.productName }}</span>
								<span style="flex: 1">{{ data.weightCalculateStr }}</span>
								<span style="flex: 1; display: flex">
									<span style="flex: 1">{{ data.variantCodeOneValueWithDesc }}</span>
									<span style="flex: 1">{{ data.variantCodeTwoValueWithDesc }}</span>
								</span>
							</span>
						</template>
					</el-tree>
				</div>
			</el-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="selectProductDialog">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { usePFOInstanceApi } from '/@/api/order/placeFollowOrderInstance';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['selectInstance']);

// 引入 api 请求接口
const pFOInstanceApi = usePFOInstanceApi();

// 定义变量内容
const treeTableRef = ref();
const state = reactive({
	treeCheckAll: false,
	treeLoading: false,
	treeTableData: [] as ProductTreeNode[],
	treeDefaultProps: {
		children: 'children',
		label: 'label',
	},
	treeSelArr: [] as ProductTreeNode[],
	treeLength: 0,

	placeFollowOrderId: 0,
	dialog: {
		headerText: "选择产品细则",
		isShowDialog: false,
		title: '',
		submitTxt: '提交',
	},
});

// 初始化树的长度
const initTreeLengh = (arr: ProductTreeNode[]) => {
	let count = 0;
	arr.map((item) => {
		if (item.children) {
			count += item.children.length;
		}
	});
	state.treeLength = count + arr.length;
};

// 节点选中状态发生变化时的回调
const onCheckTree = () => {
	state.treeSelArr = [];
	state.treeSelArr = treeTableRef.value.getCheckedNodes();
	state.treeSelArr.length == state.treeLength ? (state.treeCheckAll = true) : (state.treeCheckAll = false);
};

// 选择元素按钮
async function onSubmit() {
	let treeArr = treeTableRef.value.getCheckedNodes();
	if (treeArr.length <= 0) {
		ElMessage.warning('请选择元素');
		return;
	} else {
		const param = {
			placeFollowOrderId: state.placeFollowOrderId,
			selectedList: treeArr,
		}
		const result = await pFOInstanceApi.selectPFOInstance(param);
		if (result.data == null)
			return Promise.resolve(true);
		const instanceList: PlaceFollowOrderInstance[] = result.data;
		closeDialog(); // 关闭弹窗
		emit('selectInstance', instanceList);
	}
};

// 初始化树模拟数据
async function getTreeData(placeFollowOrderId: number, vendorId: number, vendorProductTypeId: number) {
	const param = {
		vendorId,
		placeFollowOrderId,
		vendorProductTypeId,
	};
	const result = await pFOInstanceApi.queryProductTree(param);
	if (result.data == null)
		return Promise.resolve(true);
	const productTree: ProductTreeNode[] = result.data;

	productTree.forEach(item => {
		let weightCalculateStr = "计抛";
		if (item.weightCalculate != 1) {
			weightCalculateStr = "计重";
		}
		item.weightCalculateStr = weightCalculateStr;
	});

	state.treeTableData = productTree;
	initTreeLengh(state.treeTableData);
};

// 打开弹窗
async function openDialog(placeFollowOrderId: number, vendorId: number, vendorProductTypeId: number, vendorName?: string, vendorProductTypeName?: string) {
	state.placeFollowOrderId = placeFollowOrderId;
	state.dialog.headerText = "选择产品细则，供应商：" + vendorName + "，供应商产品类型：" + vendorProductTypeName;

	getTreeData(placeFollowOrderId, vendorId, vendorProductTypeId);
	state.dialog.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>


<style scoped lang="scss">
.select-product-dialog-container {
	.tree-head {
		height: 48px;
		line-height: 48px;
		border: 1px solid var(--next-border-color-light);
		border-bottom: none;
		display: flex;
		padding-right: 8px;
		font-weight: bold;
		color: #909399;

		.tree-head-item {
			flex: 1;
		}

		.tree-head-one {
			padding-left: 8px;
		}
	}

	.el-tree {
		overflow: hidden;
		border-bottom: 1px solid var(--next-border-color-light);

		.tree-custom-node {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 8px;
			width: 100%;
		}

		&:deep(.el-tree-node) {
			border: 1px solid var(--next-border-color-light);
			border-bottom: none;
			color: #606266;

			.el-tree-node__content {
				line-height: 57px !important;
				height: 57px !important;
			}

			.el-tree-node__children {
				.el-tree-node {
					border: none;
				}

				.el-tree-node__content {
					border-top: 1px solid var(--next-border-color-light);
				}
			}
		}
	}
}
</style>
